<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%String ctx = request.getContextPath();%>
<title>do exam</title>
</head>

<script>
	let paperId = Number(${PaperId})
	let cNmu = Number(${CQuestionsNum})
	let mNmu = Number(${MQuestionsNum})
	let jNmu = Number(${JQuestionsNum})
	let dNmu = Number(${DQuestionsNum})
	let currNum = 0

	<c:if test="${fn:length(CurrQueNum) gt 0}">
		currNum = Number(${CurrQueNum})
	</c:if>

	$(document).ready(function(){
		if('${Type}' === 'C' || '${Type}' === 'J') {
			$('#question input[type="radio"]').each(function() {
				if($(this).prop('value') === "${CurrentAnswer}") {
					$(this).prop('checked', 'checked')
				}
			});
		} else if('${Type}' === 'M') {
			let ans = "${CurrentAnswer}"
			$('#question input[type="checkbox"]').each(function() {
				if(ans.includes($(this).prop('value'))) {
					$(this).prop('checked', 'checked')
				}
			});
		}
	});

	function getQuestion(num) {
		currNum = num
		AjaxLoad('<%=ctx%>/paper?act=editPaper&paperid=' + paperId+"&currquenum=" + currNum)
	}

	function changeQuestion(val) {
		currNum += val
		if(currNum === 0) {
			currNum = 1
		} else if(currNum > cNmu+mNmu+jNmu+dNmu) {
			currNum = cNmu+mNmu+jNmu+dNmu
		}
		AjaxLoad('<%=ctx%>/paper?act=editPaper&paperid=' + paperId + "&currquenum=" + currNum)
	}

	function removeQuestion() {
		$.ajax(
				{ type:"POST",
					url: "<%=ctx%>/paper?act=removeQuestion",
					data: {
						"paperid" :paperId,
						"queNum": currNum,
					},
					success: function(data, status) {
						currNum = 1;
						alert(data);
						AjaxLoad('<%=ctx%>/paper?act=editPaper&paperid=' + paperId + "&currquenum=" + currNum);
					},
					error: function(req, status, msg) {
						alert(msg)
					}
				}
		)
	}

	function updateQuestion() {
		let t = ""
		let answers = ""
		if('${Type}' === 'C') {
			t = "choice"
			answers = $('#question input:radio:checked').val();
		} else if('${Type}' === 'M') {
			t = "choice"
			answers = ""
			$('#question input[type="checkbox"]').each(function() {
				if($(this).prop('checked')) {
					answers += $(this).prop('value') + ","
				}
			});
		} else if('${Type}' === 'J') {
			t = "judge"
			answers = $('#question input:radio:checked').val();
		}
		if(answers.length === 0) {
			alert('请输入答案');
			return;
		}
		$.ajax(
				{
					type:"POST",
					url: "<%=ctx%>/question?act=updateQuestionAnswer",
					data: {
						"answers": answers,
						"paperid": paperId,
						"currquenum": currNum,
						"type": t,
					},
					success: function(data, status) {
						if(data.length > 0)
							alert(data);
						AjaxLoad('<%=ctx%>/paper?act=editPaper&paperid=' + paperId + "&currquenum=" + currNum);
					},
					error: function(req, status, msg) {
						alert(msg)
					}
				}
		)
	}

</script>



<body>
<div class="container">

	<div class="row" style="height: 3vh; margin-top: 30px">
		<c:if test="${CQuestionsNum gt 0}">
			单选:
		</c:if>
		<c:forEach var="i" begin="1" end="${CQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;">
		<c:if test="${MQuestionsNum gt 0}">
			多选:
		</c:if>
		<c:forEach var="i" begin="${CQuestionsNum + 1}" end="${CQuestionsNum + MQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;">
		<c:if test="${JQuestionsNum gt 0}">
			判断:
		</c:if>
		<c:forEach var="i" begin="${CQuestionsNum + MQuestionsNum + 1}" end="${CQuestionsNum + MQuestionsNum + JQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;">
		<c:if test="${DQuestionsNum gt 0}">
			简答:
		</c:if>
		<c:forEach var="i" begin="${CQuestionsNum + MQuestionsNum + JQuestionsNum + 1}" end="${CQuestionsNum + MQuestionsNum + JQuestionsNum + DQuestionsNum}">
			<c:choose>
				<c:when test="${CurrQueNum eq i}">
					<button type="button" class="btn btn-success" onclick="getQuestion(${i})">${i}</button>
				</c:when>
				<c:otherwise>
					<button type="button" class="btn" onclick="getQuestion(${i})">${i}</button>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</div>
<p/>
	<div class="row" style="height: 3vh;"/>

	<div class="row">
		<h3>${Question.content}</h3>
		<hr>
	</div>

	<div class="row" style="height: 60vh" id="question">
		<c:if test="${Type eq 'C'}">
			<c:forEach items="${ItemVoList}" var="Item">
				<label class="btn">
					<input type="radio" name="C" value="${Item.alpha}"> <b style="font-size: large">${Item.alpha}.</b> ${Item.content}
				</label>
				<p/>
			</c:forEach>
		</c:if>
		<c:if test="${Type eq 'M'}">
			<c:forEach items="${ItemVoList}" var="Item">
				<label class="btn">
					<input type="checkbox" name="M" value="${Item.alpha}"> <b style="font-size: large">${Item.alpha}.</b> ${Item.content}
				</label>
				<p/>
			</c:forEach>
		</c:if>

		<c:if test="${Type eq 'J'}">
			<label class="btn">
				<input type="radio" name="J" value="true"> 对
			</label>
			&nbsp;&nbsp;&nbsp;
			<label class="btn">
				<input type="radio" name="J" value="false"> 错
			</label>
		</c:if>

	</div>
	<p/>
	<p/>
	<p/>

	<div class="col-md-10 col-xs-12">

		<button type="button" class="btn btn-primary" onclick="changeQuestion(-1)">
			上一题</button>
		&nbsp;&nbsp;&nbsp;
		<button type="button" class="btn btn-success" onclick="changeQuestion(1)">
			下一题</button>

		<c:choose>
			<c:when test="${Type eq 'D'}">
			</c:when>
			<c:otherwise>
				&nbsp;&nbsp;&nbsp;
				<button type="button" class="btn btn-warning" onclick="updateQuestion()">更改</button>
			</c:otherwise>
		</c:choose>


		&nbsp;&nbsp;&nbsp;
		<button type="button" class="btn btn-danger" onclick="removeQuestion()">
			删除</button>
	</div>
	
</div>



</body>
</html>